﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>单个页面对表格的操作</title>
    <style type="text/css">
        body {
            font-size:12px;
        }
    </style>
    <script src="http://hsjdtech.com/inter/scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = "{\"words_freq\": [{\"key\": \"太阳能电池\",\"value\": \"550\"},{\"key\": \"表面\",\"value\": \"200\"},{\"key\": \"电池片\",\"value\": \"100\"}]}"
            var jsonArr = eval('(' + data + ')')["words_freq"];
            createMore(jsonArr);
        });
        function createMore(jsonArr) {
            $("#monitorsDiv").html("");
            var objStr = "";
            for (var i = 0; i < jsonArr.length; i++) {
                if (i == 0) {
                    objStr += "<div class=\"monDiv\" style=\"margin:15px 0;\">";
                } else {
                    objStr += "<div class=\"monDiv\" style=\"margin-bottom:15px;\">";
                }
                objStr += "<span class=\"tDiv\" style=\"width: 100px;float:left; color: #2B8ECA;text-align:right;\">源语言关键词:</span>";
                objStr += "<input type=\"text\" class=\"keyName\" value=\"" + jsonArr[i]["key"] + "\"   style=\"width:150px;float:left;margin:0 15px;\"/>";
                objStr += "<span class=\"tDiv\" style=\"width: 80px;float:left; color: #2B8ECA;\">关键词词频:</span>";
                objStr += "<input style=\"width:100px;float:left;\" value=\"" + jsonArr[i]["value"] + "\"  type=\"text\" class=\"keyValue\" />";
                objStr += "<span onclick=\"deletespanClick(this)\" title=\"删除\" style=\"color:red;cursor:pointer;margin-left:15px;\" class=\"deleteSpan\">×删除</span>";
                objStr += "</div>";
            }
            objStr += "<div onclick=\"addMon()\" id=\"addDiv\" style=\"height: 40px; width: 100%; float: left;\">";
            objStr += "<div class=\"tDiv\" style=\"width: 70px; color: #FF7700;  cursor:pointer;margin-left:20px;\">添加</div>";
            objStr += "</div>";
            $("#monitorsDiv").append(objStr);
        }
        var i = 0;
        function addMon() {
            $("#addDiv").remove();
            var objStr = "<div class=\"monDiv\" style=\"margin-bottom:15px;\">";
            objStr += "<span class=\"tDiv\" style=\"width: 100px;float:left; color: #2B8ECA;text-align:right;\">源语言关键词:</span>";
            objStr += "<input type=\"text\" class=\"keyName\"   style=\"width:150px;float:left;margin:0 15px;\"/>";
            objStr += "<span class=\"tDiv\" style=\"width: 80px;float:left; color: #2B8ECA;\">关键词词频:</span>";
            objStr += "<input style=\"width:100px;float:left;\" id=\"keyValue" + i + "\"  type=\"text\" class=\"keyValue\"   />";
            objStr += "<span onclick=\"deletespanClick(this)\" title=\"删除\" style=\"color:red;cursor:pointer;margin-left:15px;\" class=\"deleteSpan\">×删除</span>";
            objStr += "</div>";
            objStr += "<div onclick=\"addMon()\" id=\"addDiv\" style=\"height: 40px; width: 100%; float: left;\">";
            objStr += "<div class=\"tDiv\" style=\"width: 50px; color: #FF7700;  cursor:pointer;margin-left:20px;\">添加</div>";
            objStr += "</div>";
            $("#monitorsDiv").append(objStr);
            i = i + 1;
        }
        // 删除一行记录
        function deletespanClick(obj) {
            if (confirm("是否确认删除?")) {
                $(obj).parent(".monDiv").hide("slow", function () {
                    $(obj).parent(".monDiv").remove();
                });
            }
        }
        //提交
        function getValue() {
            var keyName = [], keyValue = [];
            $("#monitorsDiv .monDiv").each(function () {
                keyName.push($(this).children(".keyName").val());
                keyValue.push($(this).children(".keyValue").val());
            });
            alert(keyName.toString());
            alert(keyValue.toString());
        }
    </script>
</head>
<body style="margin: 0px; padding: 0px;">
  <div style="height: 490px; width: 600px; float: none; margin-left: auto; margin-right: auto;margin-top: 10px; overflow-y: auto;border:1px solid red;">
         <div id="monitorsDiv" style="width: 550px; height: 440px; overflow-y: auto;float:left;border:1px solid #d5d0d0;margin:20px;"></div>
  </div>
    <div><button onclick="getValue()">Submit</button></div>
</body>
</html>
